<!--  -->
<template>
  <view class="content">
  <view class="layout-top">
    <view class="screen">
     {{screenData}}
    </view>
  </view>
    
  <view class="layout-bottom">
    <view class="btnGroup">
      <view class="item orange" @tap="clickBtn" :data-id="idc">С</view>
      <view class="item orange" @tap="clickBtn" :data-id="idb">←</view>
      <!--<view class="item orange" @tap="clickBtn" :data-id="idt">＋/－</view>-->
      <view class="item orange iconBtn" @tap="history">
          <icon type="waiting_circle" color="white" class="icon" size="25"/>
      </view>
      <view class="item orange" @tap="clickBtn" :data-id="idadd">＋</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" @tap="clickBtn" :data-id="id9">9</view>
      <view class="item blue" @tap="clickBtn" :data-id="id8">8</view>
      <view class="item blue" @tap="clickBtn" :data-id="id7">7</view>
      <view class="item orange" @tap="clickBtn" :data-id="idj">－</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" @tap="clickBtn" :data-id="id6">6</view>
      <view class="item blue" @tap="clickBtn" :data-id="id5">5</view>
      <view class="item blue" @tap="clickBtn" :data-id="id4">4</view>
      <view class="item orange" @tap="clickBtn" :data-id="idx">×</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" @tap="clickBtn" :data-id="id3">3</view>
      <view class="item blue" @tap="clickBtn" :data-id="id2">2</view>
      <view class="item blue" @tap="clickBtn" :data-id="id1">1</view>
      <view class="item orange" @tap="clickBtn" :data-id="iddiv">÷</view>
    </view>
    <view class="btnGroup">
      <view class="item blue zero" @tap="clickBtn" :data-id="id0">0</view>
      <view class="item blue" @tap="clickBtn" :data-id="idd">.</view>
      <view class="item orange" @tap="clickBtn" :data-id="ide">＝</view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  data () {
    return {
      idb: 'back',
      idc: 'clear',
      idt: 'toggle',
      idadd: '＋',
      id9: '9',
      id8: '8',
      id7: '7',
      idj: '－',
      id6: '6',
      id5: '5',
      id4: '4',
      idx: '×',
      id3: '3',
      id2: '2',
      id1: '1',
      iddiv: '÷',
      id0: '0',
      idd: '.',
      ide: '＝',
      screenData: '0',
      operaSymbo: {'＋': '+', '－': '-', '×': '*', '÷': '/', '.': '.'},
      lastIsOperaSymbo: false,
      iconType: 'waiting_circle',
      iconColor: 'white',
      arr: [],
      logs: []
    }
  },

  methods: {
    clickBtn (event) {
      var id = event.currentTarget.dataset.id
      console.log(id)
      if (id === this.idb) {  // 退格←
        var data = this.screenData
        if (data === '0') {
          return
        }
        data = data.substring(0, data.length - 1)
        if (data === '' || data === '－') {
          data = 0
        }
        this.screenData = data
        this.arr.pop()
      } else if (id === this.idc) {  // 清屏C
        this.screenData = '0'
        this.arr.length = 0
      } else if (id === this.idt) {  // 正负号+/-
        data = this.screenData
        if (data === '0') {
          return
        }
        if (data === '－') {
          data = data.substr(1)
          this.arr.shift()
        } else {
          data = '－' + data
          this.arr.unshift('－')
        }
        this.screenData = data
      } else if (id === this.ide) {  // 等于＝
        data = this.screenData
        if (data === '0') {
          return
        }
      // eval是js中window的一个方法，而微信页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件
      // var result = eval(newData);
        console.log(data)
        var lastWord = data.charAt(data.length)
        if (isNaN(lastWord)) {
          return
        }

        var num = ''

        var arr = this.arr
        var optarr = []
        for (var i in arr) {
          if (isNaN(arr[i]) === false || arr[i] === this.idd || arr[i] === this.idt) {
            num += arr[i]
          } else {
            optarr.push(num)
            optarr.push(arr[i])
            num = ''
          }
        }
        optarr.push(Number(num))
        var result = Number(optarr[0]) * 1.0
        console.log(result)
        for (let i = 1; i < optarr.length; i++) {
          if (isNaN(optarr[i])) {
            if (optarr[1] === this.idadd) {
              result += Number(optarr[i + 1])
            } else if (optarr[1] === this.idj) {
              result -= Number(optarr[i + 1])
            } else if (optarr[1] === this.idx) {
              result *= Number(optarr[i + 1])
            } else if (optarr[1] === this.iddiv) {
              result /= Number(optarr[i + 1])
            }
          }
        }
      // 存储历史记录
        this.logs.push(data + result)
        wx.setStorageSync('calclogs', this.logs)

        this.arr.length = 0
        this.arr.push(result)

        this.screenData = result
      } else {
        if (this.operaSymbo[id]) { // 如果是符号+-*/
          if (this.lastIsOperaSymbo || this.screenData === '0') {
            return
          }
        }

        var sd = this.screenData
        if (sd === '0') {
          data = id
        } else {
          data = sd + id
        }
        this.screenData = data
        this.arr.push(id)

        if (this.operaSymbo[id]) {
          this.lastIsOperaSymbo = true
        } else {
          this.lastIsOperaSymbo = false
        }
      }
    }
  }
}

</script>
<style>
page{height:100%}
.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ccc;
    font-family: "Microsoft YaHei";
    overflow-x: hidden;
}
.layout-top{
    width: 100%;
    margin-bottom: 30rpx;
}
.layout-bottom{
    width: 100%;
}
.screen {
    text-align: right;
    width: 100%;
    line-height: 260rpx;
    padding: 0 10rpx;
    font-weight: bold;
    font-size: 60px;
    box-sizing: border-box;
    border-top: 1px solid #fff;
}
.btnGroup {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 180rpx;
    background-color: #fff;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 1px;
    margin-right: 1px;
}
.item:active {
    background-color: #ff0000;
}
.zero{
    width: 50%;
}
.orange {
    color: #fef4e9;
    background: #f78d1d;
    font-weight: bold;
}
.blue {
    color:#d9eef7;
    background-color: #0095cd;
}
.iconBtn{
    display: flex;
}
.icon{
   display: flex;
   align-items: center;
   width:100%;
   justify-content: center;
}
</style>